<!DOCTYPE html>
<!--
    To change this license header, choose License Headers in Project Properties.
    To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--        <link rel="stylesheet" type="text/css" href="http://192.168.1.236:8888/ext-4.2.1.883/resources/css/ext-all.css"/>
    <script type="text/javascript" src="http://192.168.1.236:8888/ext-4.2.1.883/ext-all-debug.js"></script>
    <script type="text/javascript" src="http://192.168.1.236:8888/ext-4.2.1.883/locale/ext-lang-zh_CN.js"></script>-->
    <link rel="stylesheet" type="text/css" href="ext-4.2.1.883/resources/css/ext-all.css"/>
    <script type="text/javascript" src="ext-4.2.1.883/ext-all-debug.js"></script>
    <script type="text/javascript" src="ext-4.2.1.883/locale/ext-lang-zh_CN.js"></script>
</head>
<body>
    <script type="text/javascript">

        var persons1 = {
            'persons':[
                {'name':'Lisa',"email":"123123@gmail.com","phone":"123456789"},
                {'name':'Misa',"email":"123124@gmail.com","phone":"223456789"},
                {'name':'Nisa',"email":"123125@gmail.com","phone":"323456789"},
                {'name':'Oisa',"email":"123126@gmail.com","phone":"423456789"},
            ]};

        Ext.create('Ext.data.Store',{
		    storeId:'simpsonsStore',
            fields:['name','email','phone'],
//            data:{
//		        'persons':[
//                    {'name':'Lisa',"email":"123123@gmail.com","phone":"123456789"},
//                    {'name':'Misa',"email":"123124@gmail.com","phone":"223456789"},
//                    {'name':'Nisa',"email":"123125@gmail.com","phone":"323456789"},
//                    {'name':'Oisa',"email":"123126@gmail.com","phone":"423456789"},
//                ]},
            data:persons1,
            proxy:{
		        type:'memory',
                reader:{
		            type:'json',
                    root:'persons'
                }
            }
        });

		Ext.create('Ext.grid.Panel', {
			title: 'Simpsons',
			store: Ext.data.StoreManager.lookup('simpsonsStore'),
			columns: [
				{ header: 'Name',  dataIndex: 'name', field: 'textfield' },
				{ header: 'Email', dataIndex: 'email', flex:1,
				 field: {
					 xtype: 'textfield',
					 allowBlank: false
				 }
				},
				{ header: 'Phone', dataIndex: 'phone' }
			],
			selType: 'rowmodel',
			plugins: [
				Ext.create('Ext.grid.plugin.RowEditing', {
					clicksToEdit: 1
				})
			],
			height: 200,
			width: 400,
			renderTo: Ext.getBody()
		});
    </script>

</body>
</html>
